<template>
  <div class="my_box">
    <div class="my_tou">
      <div class="my_fonttop">
        <div class="my_font">
          <van-icon name="arrow-left" @click="onClickLeft" />
        </div>
        <div class="my_font">
          <span class="iconfont icon-shezhi"></span>
        </div>
      </div>
      <div class="my_toubox">
        <div class="my_uploader">
          <img src="../../../public//image/headimg/head (5).png" alt="" class="my_uploader">
          <!-- <van-uploader class="my_uploader" v-model="fileList" multiple :max-count="1" /> -->
        </div>
        <div class="my_nick">
          <p class="my_ming">淘宝店-迦南素材</p>
          <p class="my_guan">管理员</p>
        </div>
      </div>
    </div>
    <div class="my_content">
      <span>设置</span>
      <div class="my_content1">
        <span>允许远程访问</span>
        <van-switch v-model="checked" active-color="#7033FF" inactive-color="#FB8F66" />
      </div>
      <div class="my_content1">
        <span>允许编辑</span>
        <van-switch v-model="checked" active-color="#7033FF" inactive-color="#FB8F66" />
      </div>
      <div class="my_content1">
        <span>允许添加成员</span>
        <van-switch v-model="checked" active-color="#7033FF" inactive-color="#FB8F66" />
      </div>
      <div class="my_shan">
        <span>账户</span>
        <div class="my_content2">
          <span>移除用户</span>
          <van-switch v-model="checked4" active-color="#7033FF" inactive-color="#FB8F66" />
        </div>
      </div>
      <div>
        <van-button color="linear-gradient(90deg, #fb8f66 0%, #7033ff 100%)" @click="log">
          退出
        </van-button>
      </div>
    </div>

  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import router from '../../router';
// const fileList = ref();
const onClickLeft = () => {
  router.push('./Hello')
}
let checked = ref()
let checked4 = ref(false)

const log = () =>{
  router.push('./login')
}
</script>
<style scoped lang="scss">
.my_tou {
  height: 180px;
  padding: 10px;
  background-color: #352C5D;
  .my_fonttop {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;

  }
  .my_font {
    font-size: 20px;
    color: white;
  }
}
.my_toubox {
  width: 100%;
  text-align: center;
  color: white;
  .my_uploader {
    width: 68px;
    height: 68px;
    border-radius: 50px;
    background-color: aliceblue;
    margin: 0 auto;
  }
  .my_nick {
    line-height: 20px;
  }
  .my_ming {
    font-size: 17px;
  }
  .my_guan {
    color: #ABA3CF;
  }
}
.my_content {
  padding: 10px;
  margin-top: 20px;
  .my_content1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ABA3CF;
    line-height: 50px;
    border-bottom: 1px solid #F6F5FA;
  }
  .my_shan {
    margin-top: 20px;
    .my_content2 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #ABA3CF;
      line-height: 50px;
    }
  }
  .van-button {
    width: 255px;
    margin-top: 50px;
    margin-left: 50px;
  }
}
</style>